﻿
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <title> 登 录 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/login2.css" rel='stylesheet' type='text/css' />
    <script src="/js/jquery.min.js"></script>
</head>
<body >
<div class="count">
    <div class="demo">
        <div class="login">
            <div style="width: 40%; float: left;padding: 8% 2%;height: 100%;">
                <div style="text-align: center;height:25%">
                    <img src="/img/logo.jpg" style="width:45%;height: auto">
                </div>
                <div style="text-align: center;height:20%;">
                    <span style="font-size: 2.4rem;color:#fff">欢迎来到娱论君</span>
                </div>
                <div style="text-align: center;height:10%">
                    <span style="font-size: 1.8rem;color:#fff">WELCOME TO YULUNJUN</span>
                </div>
                <div class="sign1" style="height:20%">
                    <input type="button" value="去注册" class="registered" id="registered"/>
                </div>
            </div>
            <div style="width: 60%;float:left;padding: 8% 0% 5% 10%;height:90%;">
                <form method="post" action="/sites/login">
                    <div style="text-align: center;width:85%;height: 60%">
                        <span style="font-size: 2.8rem;color:#fff">欢迎登陆</span><br><br><br>
                        <span style="font-size: 1.5rem;color:#fff">请使用您本人的账号密码登录</span><br><br><br>
                        <span><input type="text" name="userName" placeholder="请输入手机号码/账号"></span>
                        <span><input type="password" name="encrypt" placeholder="请输入密码"></span>
                    </div>
                    <div style="width:100%;height: 10%;">
                        <div style="width:50%;float:left">
                            <input type="text" name="verifyInput" style="width:90%;margin-left:6%"placeholder="请输入验证码">
                        </div>
                        <div style="width:40%;float:left;margin-top:1%">
                            <img class="verifyCode" onclick="changeCode()" src="getVerifyCode" width="81%"></span>
                        </div>
                    </div>
                    <div style="width:100%;height: 10%;">
                        <div style="color:#fff;float:left;width: 100%;padding:0 0 4% 2%;font-size:1.3rem">
                            <a onclick="forgotPassword()">忘记密码?</a>
                        </div>
                        <div style="text-align: center;float:left;width: 100%;">
                            <th:block th:if="${loginDto != null}">
                                <span th:text="${loginDto.message}" style="color: red;"></span>
                            </th:block>
                        </div>
                    </div>

                    <div class="sign" style="height: 10%">
                        <input type="submit" value="登录" class="submit"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    /*点击刷新验证码*/
    function changeCode(){
        var src = " /sites/getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
        $('.verifyCode').attr("src",src);                  //jQuery写法
    }
    $('#registered').click(function () {
        window.location.href = '/sites/toRegister';
    })

</script>


</body>
</html>